<template>
  <div>
    <!-- search start -->
    <search-bar placeHolder="请输入用户名称/设备号"
                @handleSearch="init" />
    <!-- search end -->
    <!-- 用户列表 start -->
    <div class="box">
      <el-table :data="userListData.list"
                style="width:100%"
                v-loading="loading">
        <el-table-column prop="name"
                         label="用户姓名"
                         align="center">
        </el-table-column>
        <el-table-column prop="phone"
                         label="用户电话"
                         align="center">
        </el-table-column>
        <el-table-column prop="company"
                         label="绑定维修厂"
                         align="center">
          <template slot-scope='scope'>
            <el-popover placement="top-start"
                        title="维修厂名称"
                        trigger="hover"
                        :content="scope.row.company">
              <a href="javascript:;"
                 v-if='scope.row.company'
                 @click="handleCompayClick(scope.row.id)"
                 slot="reference"
                 class="noNewline aStyle">
                {{scope.row.company}}
              </a>
            </el-popover>
            <span v-if='scope.row.company=="" || scope.row.company==null'>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="eq_num"
                         label="设备号"
                         align="center">
          <template slot-scope="scope">
            {{scope.row.eq_num || '无'}}
          </template>
        </el-table-column>
        <el-table-column prop="pay_status"
                         label="868支付状态"
                         align="center">
          <template slot-scope='scope'>
            {{scope.row.pay_status === 1 ? '已支付' :scope.row.pay_status === 0 ? '未支付' : '未支付868'}}
          </template>
        </el-table-column>
        <el-table-column prop="km"
                         label="行驶里程"
                         align="center">
          <template slot-scope='scope'>
            <el-button type="text"
                       @click="uid = scope.row.u_id, handleMileage()">{{scope.row.km}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="refund_sum"
                         label="退费总额"
                         align="center">
          <template slot-scope='scope'>
            <el-button type="text"
                       @click="uid = scope.row.u_id, handleReturnSum()">{{scope.row.refund_sum}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="eq_num"
                         label="设备是否绑定"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.eq_num">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="hair_time"
                         label="odd领取时间"
                         width="170"
                         align="center">
          <template slot-scope='scope'>
            {{scope.row.hair_time || '无'}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 用户列表 end -->
    <!-- 分页器 -->
    <ubi-paging :page.sync="page"
                :pageSize.sync="pageSize"
                :page-count="userListData.rows" />
    <!-- 维修厂详情弹框 -->
    <el-dialog title="维修厂详情"
               :visible.sync="garageisShow"
               width="45%"
               :center="true"
               v-el-drag-dialog>
      <el-table :data="garageDetail"
                border
                row-class-name="garaRowStyle">
        <el-table-column align="center"
                         property="company"
                         label="维修厂名称"></el-table-column>
        <el-table-column align="center"
                         property="leader"
                         label="负责人"></el-table-column>
        <el-table-column align="center"
                         property="phone"
                         label="电话"></el-table-column>
        <el-table-column align="center"
                         property="shop_set"
                         label="地址">
          <template slot-scope='scope'>
            {{concatAddress(scope.row.shop_set)}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         property="cuser_count"
                         label="设备绑定数"></el-table-column>
        <el-table-column align="center"
                         property="audit_time"
                         label="系统开通时间"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 行驶里程弹框 -->
    <v-dialog :show.sync='mileageDialog'
              width="30%"
              title="行驶里程">
      <div class="setHeight">
        <el-table :data="mileageData.data"
                  border
                  style="width: 100%">
          <el-table-column prop="o_number"
                           label="设备号"
                           align="center">
          </el-table-column>
          <el-table-column prop="km"
                           label="行驶里程（km）"
                           align="center">
          </el-table-column>
          <el-table-column prop="create_time"
                           label="时间"
                           align="center">
          </el-table-column>
        </el-table>
      </div>
      <ubi-paging :page.sync="mileagePage"
                  :pageSize.sync="mileagePageSize"
                  :pageSizes="mileagePageSizes"
                  :page-count="mileageData.last_page" />
    </v-dialog>
    <!-- 退费总额弹框 -->
    <v-dialog :show.sync="isShowReturnPrice"
              title="退费总额">
      <el-table :data="returnPrice.data"
                border
                style="width: 100%">
        <el-table-column prop="km"
                         label="行驶里程（km）"
                         align="center">
        </el-table-column>
        <el-table-column prop="refund_price"
                         label="退费金额"
                         align="center">
        </el-table-column>
        <el-table-column prop="create_time"
                         label="退费时间"
                         align="center">
        </el-table-column>
      </el-table>
      <ubi-paging :page.sync="returnPricePage"
                  :pageSize.sync="returnPageSize"
                  :page-count="returnPrice.last_page"
                  :pageSizes="mileagePageSizes" />
    </v-dialog>
  </div>
</template>
<script>

import ubiPaging from '@/views/UBI/common/ubi-data-pagination'
export default {
  data () {
    return {
      userListData: [], //用户列表数据
      page: 1, //当前页
      pageSize: 8,//每页多少条数据
      activeDate: null, //日期选择器选择的时间
      searchkey: '',//搜索关键字
      garageDetail: [],  //维修厂详情
      garageisShow: false, //维修厂详情弹框默认隐藏

      mileageDialog: false, //行驶里程详情弹框默认隐藏
      mileageData: [], //行驶里程弹框数据
      mileagePage: 1,//行驶里程弹框当前页
      mileagePageSize: 6,//
      mileagePageSizes: [4, 6, 8, 10],//行驶里程分页阶段
      uid: '',

      returnPrice: [], //退费总额弹框数据
      returnPriceLabel: [ //退费总额对应数据标题
        {
          label: '设备号',
          prop: 'o_number'
        },
        {
          label: '行驶里程',
          prop: 'km'
        },
        {
          label: '退费金额',
          prop: 'refund_price'
        },
        {
          label: '退费时间',
          prop: 'create_time'
        }
      ],//退费总额弹框数据对应标题
      isShowReturnPrice: false,//退费总额弹框默认隐藏
      returnPricePage: 1, //退费总额弹框数据当前页
      returnPageSize: 6, //退费总额每页几条数据
      loading: false //数据加载样式
    }
  },
  components: {
    ubiPaging,
  },
  methods: {
    async init (search = this.searchkey) { //页面初始化数据
      this.loading = true;
      const paramsStr = Object.assign(search,{page: this.page,pageSize: this.pageSize})
      let res = await this.api.ubiUserList(paramsStr).then(res => res);
      this.userListData = res.data;
      this.loading = false;

    },
    handleCompayClick (id) {//列表维修厂单击事件
      this.api.ubiGarage({ id: id }).then(res => {
        this.garageisShow = true
        this.garageDetail = []
        this.garageDetail.push(res.data)
      })
    },
    concatAddress (address) {//维修厂详情地址拼接
      if (address) {
        let newAdd = address.province + address.city + address.county + address.address
        return newAdd
      } else {
        return '无'
      }
    },

    handleMileage () {//行驶里程查看详情
      this.api.ubiMileage({ u_id: this.uid, page: this.mileagePage, pageSize: this.mileagePageSize }).then(res => {
        this.mileageData = res.data;
        this.mileageDialog = true;
      })
    },
    handleReturnSum () { //退费总额弹框数据
      this.api.ubiReturnSun({ u_id: this.uid, page: this.returnPricePage, pageSize: this.returnPageSize }).then(res => {
        this.isShowReturnPrice = true
        this.returnPrice = res.data
      })
    }
  },
  watch: {
    page () { //当前页发生变化
      this.init()
    },
    pageSize () { //每页数据条数发生变化
      this.init()
    },

    mileagePage () {
      this.handleMileage()
    },
    mileagePageSize () {
      this.handleMileage()
    },

    returnPricePage () {
      this.handleReturnSum()
    },
    returnPageSize () {
      this.handleReturnSum()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scope>
.aStyle {
  color: #3a8ee6 !important;
}
.noNewline {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}
.box {
  min-height: 74vh;
}
.box >>> .el-table__row {
  background-color: red !important;
  height: 74px !important;
}
.setHeight {
  min-height:45vh;
}
</style>
